<template>
    <div class="setting-box" :style="{width:setWidthGet}">
        <div class="setting-head">
            <!-- <i class="el-icon-back" @click="$store.commit('leftWidthMut', '0px')"></i> -->
            <div class="tag">
                <span>图表配置</span>
            </div>
        </div>
        <div class="setting-main">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top" label-width="100px" class="demo-ruleForm">
                <el-form-item label="图表名称:" prop="name">
                    <el-input size="mini" v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="数据地址：" prop="database">
                    <el-select v-model="ruleForm.database" placeholder="请选择数据源" size="mini" style="width:100%;">
                    <el-option label="数据源一" value="/category_data"></el-option>
                    <el-option label="数据源二" value="/templat"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="监控对象：" prop="cateList">
                    <ul class="cateList">
                        <i class="addbtn el-icon-plus" style="left:170px;" @click="addcate"></i>
                        <i class="addbtn el-icon-minus" @click="removecate"></i>
                        <li v-for="(cate, index) in ruleForm.cateList" :key="index" class="cateItem">
                            <div>
                                <p class="index">{{index+1}}、</p>
                                <el-cascader
                                    placeholder="请选择监控对象"
                                    style="width:100%"
                                    size="mini"
                                    v-model="cate.cateName"
                                    :options="options"
                                    :props="{ multiple: false, checkStrictly: true, emitPath: false }"
                                    clearable
                                    filterable
                                    :show-all-levels="false"
                                ></el-cascader>
                                <el-select size="mini" style="width:100%" v-model="cate.valueField" filterable placeholder="请选择对象度量">
                                    <el-option 
                                        v-for="item in cate.valueFieldList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <!-- <div>
                                <i class="el-icon-circle-close"></i>
                            </div> -->
                        </li>
                    </ul>
                </el-form-item>
                <el-form-item label="时间范围：" required>
                    <el-form-item prop="time">
                        <el-select size="mini" style="width:100%" v-model="ruleForm.time" filterable placeholder="请选择时间范围">
                            <el-option 
                                v-for="item in timeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                         <!-- <el-date-picker
                            size="mini"
                            v-model="ruleForm.time"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions"
                            @change="changePicker">
                        </el-date-picker> -->
                    </el-form-item>
                </el-form-item>
                <el-form-item>
                    <el-button size="mini" type="primary" @click="submitForm('ruleForm')"
                        :btnLoading="btnLoading"
                    >{{ btnLoading ? '保存中 ...' : '立即创建' }}</el-button>
                    <el-button size="mini" @click="resetForm('ruleForm')">返回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    name: 'setting-box',
    props: ['chartInfo'],
    computed: {
        ...mapGetters(['setWidthGet']),
    },
    watch: {
        setWidthGet(val) {
            if (val === '0px') {
                if (this.timeOut) this.timeOut = null;
                console.log('关闭详细配置');
            } else {
                console.log('开启详细配置', this.chartInfo);

            }
        }
    },
    data() {
        return {
            btnLoading: false,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            timeList:[
                {label:'近一小时',value:'1h'},
                {label:'近一周',value:'1week'},
                {label:'近一月',value:'1mouth'}
            ],
            ruleForm: {
                name: '',
                database: '',
                cateList: [
                    {
                        cateName: '',
                        valueField: '',
                        valueFieldList: [
                            {label:'调用量',value:'pv'},
                            {label:'失败率',value:'uv'}
                        ]
                    }
                ],
                time: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                date1: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                date: [
                    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
                resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            },
            options: [{
                value: 'pt1',
                label: '平台1',
                children: [{
                    value: 'pt1-zh1',
                    label: '租户1',
                    children: [{
                        value: 'pt1-zh1-jkA',
                        label: '接口A',
                        children: [
                            {label: '字段A', value: 'pt1-zh1-jkA-zdA'}
                        ]
                    }, {
                        value: 'pt1-zh1-jkB',
                        label: '接口B'
                    }, {
                        value: 'pt1-zh1-jkC',
                        label: '接口C'
                    },]
                }, {
                    value: 'pt1-zh2',
                    label: '租户2',
                    children: [{
                        value: 'zh2-jkA',
                        label: '接口a'
                    }, {
                        value: 'zh2-jkB',
                        label: '接口b'
                    }, {
                        value: 'zh2-jkC',
                        label: '接口c'
                    },]
                },{
                    value: 'pt1-zh3',
                    label: '租户3',
                    children: [{
                        value: 'zh2-jk1',
                        label: '接口1'
                    }, {
                        value: 'zh2-jk2',
                        label: '接口2'
                    }, {
                        value: 'zh2-jk3',
                        label: '接口3'
                    },]
                }
                ]
            }],
            timeOut: null
        };
    },
    methods: {
        submitForm(formName) {
            if (this.btnLoading) {
                return;
            }
            this.$confirm('确定要保存配置吗？')
                .then(() => {
                    this.btnLoading = true;
                    this.checkParams(formName);
                });
        },
        checkParams(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    const {x,y,w,h,i,moved} = this.chartInfo;
                    const {chartType, theme} = this.chartInfo.config;
                    const item = {
                        config:{
                            chartType,
                            theme,
                            ...this.ruleForm
                        },
                        x,y,w,h,i,moved
                    };
                    this.$emit('closeSet', item);
                    this.timeOut = setTimeout(() => {
                        this.btnLoading = false;
                        this.$store.commit('setWidthMut', '0px');
                    }, 500);
                } else {
                    this.btnLoading = false;
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.$store.commit('setWidthMut', '0px');
        },
        changeCate(val) {
            let lastList = [];
            val.forEach(element => {
                let stackName = '';
                if (element.length >= 2) {
                    stackName = element[element.length - 2];
                }
                lastList.push({
                    name: element[element.length - 1],
                    stackName
                });
            });
            console.log(JSON.stringify(val),lastList);
        },
        changePicker(val) {
            console.log(val);
        },
        removecate() {
            this.ruleForm.cateList.pop();
        },
        addcate(){
            this.ruleForm.cateList.push({
                cateName: '',
                valueField: '',
                valueFieldList: [
                    {label:'pv',value:'pv'},
                    {label:'uv',value:'uv'}
                ]
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.setting-box{
    z-index: 99;
    height: 88%;
    // width: 0px;
    margin: {
        top: 80px;
        left: 20px;
    };
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 5px;
    background: linear-gradient(0deg,#3358f4,#67b1fc);
    box-shadow: 0 2px 22px 0 rgba(0, 0, 0, 20%), 0 2px 30px 0 rgba(0, 0, 0, 35%);
    transition: all 0.35s;
    overflow-x: hidden;
    overflow-y: auto;
    /*修改滚动条样式*/
    &::-webkit-scrollbar{
        width:10px;
        height:10px;
    /**/
    }
    &::-webkit-scrollbar-track{
    background: rgba($color: #000000, $alpha: 0);
    border-radius:2px;
    }
    &::-webkit-scrollbar-thumb{
        background: rgba($color: #ccc, $alpha: 0.5);
        border-radius:5px;
    }
    &::-webkit-scrollbar-thumb:hover{
    background: #333;
    }
    &::-webkit-scrollbar-corner{
        background: #179a16;
    }
    .setting-head{
        display: flex;
        overflow: hidden;
        align-items: center;
        margin:0 12px;
        height: 50px;
        line-height: 50px;
        border-bottom: 3px solid hsla(0,0%,100%,.5);
        .tag {
            height: 50px;
            line-height: 50px;
            text-align: center;
            width: 100%;
            span,i{
                font-size: 2rem;
                transition: all 0.3s;
                opacity: 1;
            }
        }
        i{
            font-size: 3rem;
            cursor: pointer;
        }
    }
    .setting-main{
        text-align: left;
        box-sizing: border-box;
        padding: 10px;
        .cateList{
            list-style-type: none;
            padding-left: 0px;
            position: relative;
            .cateItem{
                display: flex;
                align-items: center;
                border-bottom: 1px solid rgba($color: #fff, $alpha: 0.5);
                .index{
                    color: #fff;
                    margin: 1rem 0 0 0;
                    height: 1.5rem;
                    font-size: 1.5rem;
                    line-height: 1.5rem;
                    border-bottom: 1px dashed #fff;
                }
            }
            .addbtn{
                position: absolute;
                top: -33px;
                left: 200px;
                font-size: 1.5rem;
                border: 1px solid #fff;
                color: #fff;
                border-radius: 5px;
                cursor: pointer;
            }
        }
    }
}
::v-deep .el-form-item__label{
    color: white;
    height: 1rem;
    line-height: 1rem;
}
</style>